<template>
	<view class="refund-result">
		<n-loading></n-loading>
		<view class="result-title">
			<hr>
			<text class="title" v-if="orderInfo.apply_cancel==1">
			{{orderInfo.status==1?'等待商家确认':
			(orderInfo.status==2?'审核通过':
			(orderInfo.status==3?'审核未通过':'已完成'))}}</text>
			<text class="title" v-if="orderInfo.apply_cancel==2">您已主动撤销申请</text>
		</view>
		<view v-if="orderInfo">
			<view class="result-info">
				<view v-if="orderInfo.status==1 && orderInfo.apply_cancel==1">
					<text>您已成功发起退款申请，请耐心等待</text>
					<text>商家处理</text>
					<text class="info-tips">商家同意后，系统将退款给您</text>
				</view>
				<view v-if="orderInfo.status==1 && orderInfo.apply_cancel==2">
					<text>如有疑问请咨询客服</text>
				</view>
				<view v-if="orderInfo.status==2">
					<text>您的退款金额将于48小时内原路返回至您的账户</text>
					<text class="info-tips">请注意查收退款金额</text>
				</view>
				<view v-if="orderInfo.status==3">
					<!-- <text>商家处理</text> -->
					<text>如有疑问请咨询客服</text>
					<text class="info-tips">咨询客服了解订单疑问</text>
				</view>
				<view v-if="orderInfo.status==5">
					<text>您的退款已退回原支付账户</text>
					<text class="info-tips">请注意查收退款金额</text>
				</view>
				<button v-if="orderInfo.afterSalesTimes == null && orderInfo.status==1 && orderInfo.apply_cancel==1" @tap="revokeApply(orderInfo.aftersales_id,orderInfo.order_id)">撤销申请</button>
			</view>
			<view class="result-message">
				<text class="message-title">退款信息</text>
				<view class="reason-top" v-for="(item,index) of orderInfo.orderItems">
					<!-- <img :src="item.image" /> -->
					<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="reason-top-name">
						<view class="name ellipsis">{{item.name}}</view>
						<view class="type">{{item.specs}}</view>
					</view>
				</view>
				<view class="message-detail">
					<view>退款原因 <text>{{orderInfo.refuse_msg}}</text></view>
					<view>退款金额 <text>￥ {{orderInfo.refund}}</text></view>
					<view>申请时间 <text>{{getdate(orderInfo.created_at,1)}}</text></view>
					<view>退款编号 <text>{{orderInfo.aftersales_id}}</text></view>
				</view>
			</view>
			<view class="result-speed">
				<text class="speed-title">退款进度</text>
				<view class="logsBox">
					<u-time-line>
						<u-time-line-item v-for="(item,index) of logs" :key="item.id">
							<template v-slot:node>
								<view class="u-node" v-if="index==0">
									<image src="../../static/img/logsLine.svg" class="logsDian"></image>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<!-- <view class="u-order-desc">{{item.content}}</view> -->
									<view class="u-order-desc">
										<u-parse :html="item.content" class="detail-content"></u-parse>
									</view>
									<view class="u-order-time">{{getdate(item.created_at,1)}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>
		</view>
		
		<u-modal 
			v-model="tipsshow"
			title="撤销退款"
			:content="content"
			confirm-text="确认"
			cancel-text="取消"
			:show-cancel-button="true"
			confirm-color="#333333"
			cancel-color="#999999"
			:async-close="true"
			@confirm="confirmtips"
			>
		</u-modal>
	</view>
</template>

<script>
export default{
	data() {
		return{
			orderInfo:null,
			logs:[],
			// 撤销申请
			tipsshow:false,
			content:'您仅能主动撤销一次，撤销后将不能在主动撤销，且超出保障期后无法再次发起售后。',
			aftersales_id:null,
			order_id:null,
		}
	},
	onLoad: function (option) {
		this.getOrderInfo(option.id);
	},
	methods:{
		getOrderInfo(id){
			this.apiget('/fun/bill-aftersales/view',{id:id}).then(res =>{
				if(res.data.status == 200 ) {
					this.orderInfo = res.data.data;
					this.logs = res.data.data.log;
				}
			})
		},
		// 撤销申请
		revokeApply(aftersales_id,order_id){
			this.tipsshow = true;
			this.aftersales_id = aftersales_id,
			this.order_id = order_id;
		},
		confirmtips() {
			var _this = this;
			_this.tipsshow = false;
			this.apipost('/fun/bill-aftersales/cancel-after-sales',{aftersales_id:this.aftersales_id,order_id:this.order_id}).then(res =>{
				if(res.data.status == 200 ) {
					uni.showToast({
						icon: 'success',
						duration:1000,
						title: '撤销成功',
						success: ress => {
							setTimeout(function (){
								_this.getOrderInfo(_this.aftersales_id);
							}, 1000);
						},
					});
				}
			})
		}
	}
}
</script>

<style lang="scss">
	.refund-result{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		.result-title{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;
			hr{
				margin: 28rpx 24rpx 0 0;
				width: 8rpx;
				height: 24rpx;
				border: none;
				background: #EB4B34;
				
			}
			.title{
				color: #333333;
				font-size: 28rpx;
			}
		}
		.result-info{
			width: 100%;
			// height: 176rpx;
			background: #fff;
			padding: 24rpx 32rpx;
			display: flex;
			.result-info-one{
				flex: auto;
			}
			text{
				display: block;
				color: #333333;
				font-size: 28rpx;
			}
			.info-tips{
				color: #666666;
				font-size: 24rpx;
			}
			button{
				width: 200rpx;
				height: 60rpx;
				background: #fff;
				border: 2rpx solid #FF5238;
				color: #FF5238;
				border-radius: 50rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				margin: 36rpx 0 0 26rpx;
			}
		}
		.result-message{
			width: 100%;
			height: 518rpx;
			background: #fff;
			padding: 24rpx 32rpx;
			margin: 16rpx 0;
			.message-title{
				font-size: 32rpx;
				color: #333333;
				display: block;
				padding-bottom: 48rpx;
			}
			.reason-top{
				width: 100%;
				height: 160rpx;
				background-color: #fff;
				display: flex;
				
				img{
					width: 116rpx;
					height: 116rpx;
					border-radius: 8rpx;
					margin-right: 32rpx;
				}
				
				.niccImg{
					width: 116rpx;
					height: 116rpx;
					border-radius: 8rpx;
					margin-right: 32rpx;
					overflow: hidden;
				}
				
				.reason-top-name{
					// width: 60%;
					flex: auto;
					width: 1px;
					height: 90rpx;
					padding-top: 12rpx;
					.name{
						color: #333333;
						font-size: 32rpx;
						
					}
					.type{
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
			.message-detail{
				view{
					line-height: 56rpx;
					color: #666666;
					font-size: 28rpx;
				}
				text{
					color: #333333;
					font-size: 28rpx;
					padding-left: 20rpx;
				}
			}
		}
		.result-speed{
			width: 100%;
			min-height: 360rpx;
			background: #fff;
			padding: 24rpx 32rpx;
			.speed-title{
				font-size: 32rpx;
				color: #333333;
				display: block;
				padding-bottom: 8rpx;
			}
			
			.logsBox{
				padding-top: 38rpx;
				
				.logsDian{
					width: 32rpx;
					height: 32rpx;
				}
				
				.u-order-desc{
					font-size: 28rpx;
					line-height: 44rpx;
					color: #666666;
				}
				
				.u-order-time{
					font-size: 24rpx;
					line-height: 36px;
					color: #666666;
				}
			}
		}
	}
</style>
